<template>
  <el-aside width="1">
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="/home"
      text-color="#fff"
      router
      :collapse="props.cos"
    >
      <!-- 一级菜单 -->
      <el-menu-item index="/home">
        <!-- 一节菜单图标 -->
        <el-icon><icon-menu /></el-icon>
        <!-- 一节菜单标题 -->
        <span>首页</span>
      </el-menu-item>

      <!-- 二级菜单 -->
      <el-sub-menu index="1">
        <template #title>
          <!-- 二级菜单图标 -->
          <el-icon><location /></el-icon>
          <!-- 二节菜单标题 -->
          <span>用户管理</span>
        </template>
        <!-- sub-menu的子菜单 -->
        <el-menu-item index="/userAdmin">
          <el-icon><icon-menu /></el-icon>
          <!-- 一节菜单标题 -->
          <span>用户列表</span>
        </el-menu-item>
        <el-menu-item index="/userAddAdmin">
          <el-icon><icon-menu /></el-icon>
          <!-- 一节菜单标题 -->
          <span>用户添加</span>
        </el-menu-item>

        <!-- sub-menu 再放sub-menu 就是三级菜单 -->
        <!-- <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu> -->
      </el-sub-menu>

      <!-- 二级菜单 -->
      <el-sub-menu index="2">
        <template #title>
          <!-- 二级菜单图标 -->
          <!-- elementPlus中图标-现在都是组件 -->
          <!-- <el-icon><Notification /></el-icon> -->
          <el-icon><component :is="'Notification'"></component></el-icon>
          <!-- 二节菜单标题 -->
          <span>通知公告</span>
        </template>
        <!-- sub-menu的子菜单 -->
        <el-menu-item index="/noticeMan">
          <el-icon><icon-menu /></el-icon>
          <!-- 一节菜单标题 -->
          <span>通知公告管理</span>
        </el-menu-item>
        <el-menu-item index="/noticeCateMan">
          <el-icon><icon-menu /></el-icon>
          <!-- 一节菜单标题 -->
          <span>通知公告分类</span>
        </el-menu-item>

        <!-- sub-menu 再放sub-menu 就是三级菜单 -->
        <!-- <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu> -->
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>
<script setup lang="ts">
import { Menu as IconMenu, Location } from '@element-plus/icons-vue'
import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
import { defineProps } from 'vue'

const props = defineProps(['cos'])
</script>
<style lang="css" scoped>
.el-menu-vertical-demo {
  height: 100vh;
}
</style>
